<template>
  <div class="special">
    <div class="top" v-for="item in subjectData.data" :key="item.id">
      <div class="topImg">
        <img :src="item.scene_pic_url" alt="" />
      </div>
      <h1>{{ item.title }}</h1>
      <h2>{{ item.subtitle }}</h2>
      <span>¥ {{ item.price_info }} 元起</span>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Subject",
  data() {
    return {
      subjectParams: {
        count: "", //总专题数
        currentPage: "1", //当前页
        pageSize: "2", //每页个数
        totalPages: "", //总页数
        data: [], //专题数组
      },
    };
  },
  computed: {
    ...mapState({
      subjectData: (state) => state.subject.subjectData,
    }),
  },
  mounted() {
    this.$store.dispatch("getSubject", this.subjectParams);
    this.$bus.$emit('changeFlag',1)
  },
};
</script>

<style lang="less" scoped>
.special {
  width: 100%;
  height: 100%;
  text-align: center;
}
.special .top {
  width: 100%;
  margin-bottom: 0.5rem;
}
.topImg {
  width: 100%;
  height: 7rem;
}
.topImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top span {
  font-size: 18px;
  color: red;
  padding-bottom: 2rem;
}
h1 {
  margin-top: 5px;
  font-weight: normal;
  color: rgb(49, 45, 45);
}
h2 {
  margin: 5px 0;
  font-weight: normal;
  color: rgb(129, 127, 127);
}
</style>